<template>
  <div>
    <div class="myself">
      <div class="selfinfo">
        <div class="leftinfo">
          <h2>不闹的主页哟</h2>
          <el-divider content-position="left">个人信息</el-divider>
          <span style="color: #99b1fb">陈{{ nackname }} </span>
          <span>不闹</span>
          <el-divider content-position="left">母校/专业</el-divider>
          <span>西南科技大学城市学院 / </span>
          <span style="color: #99b1fb">计算机科学与技术</span>
          <el-divider><i class="el-icon-mobile-phone"></i>联系方式</el-divider>
          <span>176—2868—9079</span>
          <el-divider content-position="right"
            ><i class="el-icon-message"></i>邮箱</el-divider
          >
          <span>952133606@qq.com</span>
          <!-- <img class="wximg" src="../../assets/wx.png" alt="" /> -->
        </div>
        <div class="rightinfo">
          <vs-card type="3">
            <template #title>
              <h3>最开心的事</h3>
            </template>
            <template #img>
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F86f8eda0-7ed3-424b-b6a8-9a8354db8cca%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1691812434&t=10caf0c520c80fa0a0be9062490d408e"
                alt=""
              />
            </template>
            <template #text>
              <p style="padding-bottom: 8px">万万无穷的事情，就比如遇见你咯</p>
              <p>记得等在原地不要跑哟</p>
            </template>
            <template #interactions>
              <vs-button danger icon>
                <i class="bx bx-heart"></i>
              </vs-button>
              <vs-button class="btn-chat" shadow primary>
                <i class="bx bx-chat"></i>
                <span class="span"> 54 </span>
              </vs-button>
            </template>
          </vs-card>
        </div>
        <Clock />
      </div>
    </div>
    <div class="charts">
      <div class="maininfo">
        <vs-card-group>
          <vs-card :key="index" v-for="(card, index) in list">
            <template #title>
              <h3>{{ card.title }}</h3>
            </template>
            <template #img>
              <img :src="card.url" alt="" />
            </template>
            <template #text>
              <p>
                {{ card.desc }}
              </p>
            </template>
            <template #interactions>
              <vs-button danger icon>
                <i class="bx bx-heart"></i>
              </vs-button>
              <vs-button class="btn-chat" shadow primary>
                <i class="bx bx-chat"></i>
                <span class="span"> 54 </span>
              </vs-button>
            </template>
          </vs-card>
        </vs-card-group>
      </div>
      <PieChart />
    </div>
  </div>
</template>

<script>
import { userlistAPI } from "../../api/index"
import PieChart from './PieChart.vue'
import Clock from './Clock.vue'
export default {
  components: { PieChart, Clock },
  data () {
    return {
      resouse:
        "https://img1.baidu.com/it/u=137044454,4224140026&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
      nackname: "乖乖",
      engname: "cheer chen",
      userinfo: [],
      list: [
        { title: '小美', desc: '美妙的音符，带给我愉悦哟', url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F49d88f26-6d3b-4b2a-bf00-670f5ac1aea3%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1691812434&t=0b8cf596a1f89f1205c8e8734090fe31' },
        { title: '小茉', desc: '我喜欢跳舞，我觉得那是再幸福不过的事情了', url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F8d90d041-784a-407f-a82e-b851fafdf746%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1691812434&t=7f41340e0c976b2d9435458e62a496e7' },
        { title: '小可', desc: '哎，谁说女孩子只能美美的？我也要酷酷的', url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fa5b6298e-2cf5-4149-8a8d-1df9feea3b34%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1691812434&t=fd1fc571fdb0ab849f2193475e8614bf' },
        { title: '小叶', desc: '我有只小可爱，它说它会陪我一辈子', url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F2788378f-8056-43f2-9dd1-2378492925a8%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1691812434&t=ca7e37fd99f3646a041acdee88b5f465' },
        { title: '小青', desc: '今天蛋糕真难吃，呀，呜呜呜', url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fe7059566-75c2-4757-9b07-2dd91b2a009f%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1691812434&t=1f0fd4515e19d4366d91c4c833dbffd3' },
        { title: '小语', desc: '诶嘿嘿嘿嘿嘿嘿嘿', url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Ffbfde607-1f02-4035-b782-622ed6f3229b%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1691812434&t=d9ac60e11489f2d88bbd8973b8b329f5' },

      ]
    }
  },
  methods: {
    async getuserinfo () {
      var res = await userlistAPI()
      this.userinfo = res.data.data
    },
  },
  mounted () {
    this.getuserinfo()
  },
};
</script>

<style lang='less' scoped>
h1 {
  font-size: 25px;
}
.myself {
  height: 35vh;
}
.charts {
  width: 100%;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.maininfo {
  width: 50%;
}
.selfinfo {
  display: flex;
  align-items: center;
  justify-content: space-around;

  .leftinfo {
    width: 30%;
    padding: 40px;
     box-shadow: rgba(168, 165, 165, 0.25) 0px 50px 100px -20px, rgba(159, 158, 158, 0.3) 0px 30px 60px -30px;
    border-radius: 24px;
    h2{
      margin-bottom: 40px;
    }
    .headimg {
      width: 100px;
      height: 100px;
      border-radius: 50px;
      margin: 30px 30px 0px 30px;
      border: transparent solid 1px;
      transition: 0.5s linear;
      &:hover {
        // border-radius: 50%;
        border: blue solid 1px;
      }
    }
    .wximg {
      width: 100px;
      height: 100px;
      margin-left: 100px;
      &:hover {
        transform: scale(1.5);
      }
    }
    // .demo {
    //   width: 300px;
    //   height: 200px;
    // }
    .takedown {
      span {
        margin-left: 140px;
      }
      margin-top: 40px;
      width: 400px;
      height: 200px;
      background-image: url("../../assets/dog.gif");
      background-size: 400px 200px;
      background-repeat: no-repeat;
      border-radius: 30px;
      // opacity: 0.5;
      &:hover {
        transform: rotateY(180deg);
      }
    }
    .nackname {
      margin-left: 20px;
      // margin-top: 10px;
      span {
        color: #409eff;
        font-family: 幼圆;
      }
    }
    .selselfevaluationfassessment {
      margin: 40px 20px;
      h1,
      h2,
      p {
        color: #409eff;
        margin: 15px 0;
      }
      p {
        display: block;
        width: 430px;
        margin: 0 0;
        line-height: 25px;
      }
    }
  }
  .rightinfo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40%;
  }
}
</style>